<template>
    <div class="public-pag">
        <div class="arrow-left" @click="$router.go(-1)">
             <img v-if="rankId<='3'" src="../assets/images/back_b_icon.png" alt="">
             <img v-else src="../assets/images/back_w_icon.png" alt="">
        </div>
        <van-sticky :offset-top="-100" @scroll="scroll" >
        <div :class="['top-bg',{'removepadding':flag}]" v-if="typeInfo" :style="{'background-image':'url('+typeInfo.rankingImage+')'}">
            <div :class="['txt',{'none':flag}]">
                <h4 v-if="rankId<='3'">{{typeInfo.rankingTitle}} {{typeInfo.rankingSize}}</h4>
                <h4 style="color:#fff" v-else>{{typeInfo.rankingTitle}}</h4>
                <span v-if="rankId<='3'">{{typeInfo.rankingMessage}}</span>
                <span style="color:#fff" v-else>{{typeInfo.rankingSize}}</span>
            </div>
            <div :class="['txt',{'none':!flag}]">
                <h4 class="title" v-if="rankId<='3'">{{typeInfo.rankingTitle}} {{typeInfo.rankingSize}}</h4>
                <h4 class="title" style="color:#fff" v-else>{{typeInfo.rankingTitle}}</h4>
            </div>
        </div>
        </van-sticky>
        <div class="lists">
            <div class="content">
                <van-pull-refresh
                v-model="refreshing"
                @refresh="onRefresh"
                :animation-duration="500"
                >
                <template #pulling>
                  <span class="fresh">下拉可以刷新</span>
                  <span class="freshTime">上次更新 {{freshTime}}</span>
                </template>
                <template #loosing>
                  <span class="fresh">释放立即刷新</span>
                  <span class="freshTime">上次更新 {{freshTime}}</span>
                </template>
                <template #loading>
                  <van-loading size="18" type="spinner" >
                  <span class="fresh">正在刷新</span>
                  <span class="freshTime">上次更新 {{freshTime}}</span>
                  </van-loading>
                </template>
                <template #success>
                  <span class="fresh">刷新完成</span>
                  <span class="freshTime">上次更新 {{freshTime}}</span>
                </template>
                <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                >
                <router-link tag="div" :to="'/detail?id=' + item.recipeId" class="lists-item" v-for="(item) in list" :key="item.recipeId">
                    <div class="img">
                        <img :src="'https://pic.ecook.cn/web/'+ item.recipeImage+'.jpg!wl280'" alt="" v-lazy="'https://pic.ecook.cn/web/'+ item.recipeImage+'.jpg!wl280'">
                        <div :class="['no',{'lasted':item.serialNumber<=3}]">NO.{{item.serialNumber}}</div>
                    </div>
                    <div class="lists-info">
                        <h4 class="one-txt-cut">{{item.recipeTitle}}</h4>
                        <div class="p-info" v-if="rankId<='3'">
                            <img :src="'https://pic.ecook.cn/web/'+ item.recipeAuthorImage+'.jpg!wl280'" alt="">
                            <span>{{item.recipeAuthorName}}</span>
                        </div>
                        <div :class="['btm',{'rank':rankId>='3'}]">
                            <span v-if="rankId=='1'">近七天{{item.rankingValue}}次收藏</span>
                            <span v-if="rankId=='2'">近七天{{item.rankingValue}}次点赞</span>
                            <span v-if="rankId=='3'">近七天{{item.rankingValue}}次学做</span>
                            <div class="p-info" v-if="rankId>='3'">
                            <img :src="'https://pic.ecook.cn/web/'+ item.recipeAuthorImage+'.jpg!wl280'" alt="">
                                <span>{{item.recipeAuthorName}}</span>
                            </div>
                            <div class="collectbox" @click.stop="collect(item.recipeId)" v-if="item.collectState==0">
                                <img src="../assets/images/topbanner_white_blackstar_yes.png" alt="">
                                <span>收藏</span>
                            </div>
                            <div class="collectbox" @click.stop="collect(item.recipeId)" v-else>
                                <span style="color: #999;">已收藏</span>
                            </div>
                        </div>
                    </div>
                </router-link>
                </van-list>
                </van-pull-refresh>
            </div>
        </div>
    </div>
</template>

<script>
import {getRankinglistData,getRankingData} from '../api/ranking'
export default {
    data() {
        return {
            flag: false,
            lists:null,
            typeInfo:null,
            rankId:null,
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            freshTime:'暂无刷新',
            collectlist:[],
            size:0
        };
    },
    methods: {
        //获取列表数据
        getRankinglistFun(id,size){
            getRankinglistData(id,size).then(data=>{
                console.log(data);
                this.lists = data.data
                //重置点赞
                let collect = JSON.parse(window.localStorage.getItem('collectList'))
                if (collect) {
                    this.collectlist = collect
                    this.lists.forEach(item=>{
                        collect.forEach(k=>{
                            if (item.recipeId==k.id) {
                                item.collectState = 1
                            }
                        })
                    })
                }
            })
        },
        //获取榜单详情数据
        getRankingFun(){
            getRankingData().then(data=>{
                console.log(data);
                if (data) {
                    let type = data.data.filter(item=>item.rankingType == this.$route.query.type)
                    let rankInfo = type[0].recipeRanking.filter(item=>item.rankingId == this.$route.query.id)
                    this.typeInfo = rankInfo[0]
                }
            })
        },
        // //下拉刷新
        // onRefresh() {
        //     this.getRankinglistFun(this.$route.query.id,10)
        //     this.getCurrentDay()
        // },
        //当前时间
        getCurrentDay(){
            let t = new Date();
            let m = t.getMonth()+1
            let d = t.getDate()
            let h = t.getHours()
            let min = t.getMinutes()<10?'0'+t.getMinutes():t.getMinutes()
            this.freshTime = `${m}-${d} ${h}:${min}`
        },
        scroll(event){
            this.flag = event.isFixed
        },
        //收藏
        collect(id){
            let index = this.lists.findIndex(item=>item.recipeId==id)
            let index1 = this.collectlist.findIndex(item=>item.id==id)
            this.lists[index].collectState = this.lists[index].collectState==1?0:1
            console.log(this.lists[index]);
            if (this.lists[index].collectState!=0) {
                if (index1==-1) {
                    this.collectlist.push({
                    id:this.lists[index].recipeId,
                    authorname:this.lists[index].recipeAuthorName,
                    imageid:this.lists[index].recipeImage,
                    name:this.lists[index].recipeTitle
                })
                }
            }else{
                this.collectlist.splice(index1,1)
            }
            window.localStorage.setItem("collectList",JSON.stringify(this.collectlist))
        },
        //加载
        onLoad() {
            setTimeout(() => {
              if (this.refreshing) {
                this.list = [];
                this.size = 0
                this.refreshing = false;
              }
            for (let i = this.size; i < this.size + 10; i++) {
                this.list.push(this.lists[i]);
            }
            this.size +=10  
              this.loading = false;

              if (this.list.length >= 100) {
                this.finished = true;
              }
            }, 1000);
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;
            this.getCurrentDay()
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
        },
    },
    created() {
        this.rankId = this.$route.query.id
        this.getRankinglistFun(this.$route.query.id,this.size)
        this.getRankingFun()
    },
}
</script>

<style lang="less" scoped>
.public-pag{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;

    .arrow-left{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 50px;
        z-index: 1000;
        display: flex;
        align-items: center;
        
        &>img{
            width: 12px;
            height: 20px;
            margin-left: 20px;
        }      
    }
    .top-bg{
        position: relative;
        height: 150px;
        box-sizing: border-box;
        padding: 20px 30px;
        // background-image: linear-gradient(45deg,#ffdf78,#fcb017);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        .txt{
            width: 100%;
            position: absolute;
            bottom: 25px;
            
            &>h4{
                font-size: 17px;
                margin: 10px 0;
                font-weight: bold;
                letter-spacing: 0.8px;
            }
            &>span{
                font-size: 14px;
                font-weight: bold;
                margin-top: 5px;
            }
            .title{
                width: 100%;
                text-align: center;
                position: absolute;
                bottom: -10px;
                margin: 0 auto;
            }
        }
        .none{
            display: none;
        }
    }
    .removepadding{
        padding: 0!important;
    }
    .lists{
        padding: 10px 15px 0 15px;
        box-sizing: border-box;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background-color: #fff;
        position: relative;
        top: -5px;
        // overflow: hidden;
        .content{
             height: 100%;
            //  overflow-y: scroll;
            .lists-item{
                display: flex;
                height: 100px;
                margin: 0 0 15px 0;
                .img{
                    flex: 0 0 140px;
                    height: 100%;
                    border-radius: 12px;
                    overflow: hidden;
                    position: relative;

                    .no{
                        position: absolute;
                        top: 0;
                        left: 0;
                        font-size: 11px;
                        padding: 4px 6px;
                        background-color: rgba(0, 0, 0, 0.5);
                        border-bottom-right-radius: 12px;
                        color:#fff;
                        font-weight: bold;
                    }
                    .lasted {
                        background-image: linear-gradient(45deg,#ffdf78,#fcb017);
                        color:#000;
                    }
                }
                .lists-info{
                    flex: 1;
                    margin-left: 15px;
                    &>h4{
                        width: 190px;
                        margin: 10px 0 15px 0;
                        font-size: 16px;
                        font-weight: bold;
                        letter-spacing: 0.8px;
                    }
                    .p-info{
                        display: flex;
                        align-items: center;
                        &>img{
                            width: 22px;
                            height: 22px;
                            margin-right: 8px;
                            border-radius: 50%;
                        }
                        &>span{
                            font-size: 13px;
                            font-weight: bold;
                        }
                    }
                    .btm{
                        height: 20px;
                        margin-top: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        &>span{
                            font-size: 12px;
                            color: #999;
                            font-weight: bold;
                        }
                        .collectbox{
                            margin-right: 5px;
                            display: flex;
                            align-items: center;
                            &>img{
                                width: 20px;
                                height: 20px;
                                margin-right: 8px;
                            }
                            &>span{
                                font-size: 13px;
                                color: #df9b3d;
                                font-weight: bold;
                                letter-spacing: 0.8px;
                            }
                        }
                    }
                    .rank{
                        margin-top: 45px!important;
                    }
                }
            }
        }
        .fresh{
            margin: 0;
            padding: 0;
            font-size: 14px;
            margin-right: 10px;
            margin-top: 5px;
            color: #000;
        }
        .freshTime{
            font-size: 13px;
        }
    }
}
</style>